<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>博客详情</title>
    <link rel="stylesheet" href="./css/common.css?v=1" />
    <!-- 引入common.js -->
    <script src="js/common.js"></script>
    <!-- 引入jQuery -->
    <!-- 相对路径 -->
    <script src="js/jquery-3.6.3.min.js"></script>
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
  </head>

  <body>
    <!-- 导航栏 -->
    <div class="nav">
      <!-- logo -->
      <img src="./images/logo_003.jpg" alt="" />
      <div class="content">
        <span>我的博客系统</span>
        <div class="opts">
          <a href="./blog_list.html">主页</a>
          <a href="./blog_eidt.html">写博客</a>
          <a href="logout">注销</a>
        </div>
      </div>
    </div>
    <!-- 正文部分 -->
    <div class="container">
      <!-- 左边区域 -->
      <div class="container-left">
        <div class="card">
          <img src="./images/nz1.jpeg" alt="" />
          <h3></h3>
          <a href="#">Github</a>
          <div class="counter">
            <span>文章</span>
            <span>分类</span>
          </div>
          <div class="counter">
            <span>2</span>
            <span>1</span>
          </div>
        </div>
      </div>
      <!-- 右边区域 -->
      <div class="container-right">
        <!-- 博客正文 -->
        <div class="blog-content">
          <div class="blog-title"></div>
          <div class="blog-datetime"></div>
          <div
            class="content"
            id="content"
            style="background-color: transparent"
          ></div>
        </div>
        <!-- 以上 博客正文 结束 -->
      </div>
    </div>
  </body>
  <script>
    // 发送请求获取博客详情
    $.ajax({
      // 方法
      type: "get",
      // 拼装路径
      url: "blog" + location.search,
      // 回调方法
      success: function (data) {
        // 设置页面上的值
        // title, 用 webapi 设置
        let titleEl = document.querySelector(".blog-content>.blog-title");
        console.log(titleEl);
        titleEl.innerHTML = data.title;
        // 时间，用jquery设置
        $(".blog-content>.blog-datetime").html(formatDate(data.createTime));
        // 正文
        // $('.blog-content>.content').html(data.content);
        // 让内容以markdown 的形式显示
        editormd.markdownToHTML("content", { markdown: data.content });
      },
    });

    // 处理强制用户登录的逻辑
    $.ajax({
      // 请求的方法
      type: "get",
      url: "user" + location.search,
      // 成功的回调
      success: function (data) {
        console.log("检验能过...");
        // 获取用户名的标签，替换成具体的用户名
        let usernameEl = document.querySelector(".container-left>.card>h3");
        usernameEl.innerHTML = data.username;
        // 判断是否为当前博客的作者
        if (data.isAuthor == 1) {
          // 构选一个删除按钮
          // <a href="logout">注销</a>
          let deleteEl = document.createElement("a");
          deleteEl.href = "#";
          deleteEl.innerHTML = "删除";
          // 把删除按钮加入到页面中
          let optsEl = document.querySelector(".nav>.content>.opts");
          optsEl.appendChild(deleteEl);

          // 添加点击事件
          deleteEl.onclick = deleteBlog;
        }
      },
      // 专门用来处理不同状态码的属性
      // 这个属性本身也是一个对象，状态码是他的属性，状态是多少可以自定义
      // 状态码对应的类型是function,通过指定不同状态码的functino来实现不同的处理逻辑
      statusCode: {
        403: function () {
          console.log("没有登录，请登录...");
          // 强制跳转到登录页面
          location.assign("blog_login.html");
        },
      },
    });

    // 删除博客请求
    function deleteBlog() {
      // 发送删除请求
      console.log("删除被调用");
      $.ajax({
        // 请求的方法
        type: "delete",
        url: "blog" + location.search,
        success: function (data) {
          console.log("删除成功" + location.search);
          // 跳转到列表页
          location.assign("blog_list.html");
        },
        error: function (data) {
          console.log(data);
        },
      });
    }
  </script>
</html>
